<template>
	<view>
		<view class="user-other">
			<image class="user-other-img" src="/common/images/1.jpg" mode="aspectFill"></image>
		</view>
		<view class="user-other-info">
			<view class="other-info-fist">
				<image class="user-other-image" :src="userInfo.userAvatar" mode="aspectFill"></image>
				<view class="other-info-like">
					<view>
						<text>241万</text>
						<text class="other-info-text">获赞</text>

					</view>
					<view>
						<text>15.2万</text>
						<text class="other-info-text">被点赞</text>
					</view>
					<view>
						<text>241万</text>
						<text class="other-info-text">关注</text>
					</view>
				</view>
			</view>
			
			<view v-if="userId === Number(userInfo.userId)" class="other-info-center">
				<button  style="background-color:#ffda06 ;" type="primary" @click="clickButton">作者本人</button>
			</view>
			
			<view v-else class="other-info-center">
				<button v-if="userInfo.status === 'true'"  style="background-color:#007aff ;" type="primary" @click="clickButton">已关注</button>
				<button v-else type="primary" @click="clickButton">+ 关注</button>
			</view>
			
			
			<view class="other-info-last">
				<view class="other-info-ar">历史文章</view>
				<card class="item" :articleItem="item" v-for="(item, index) in articleDate" :key="index"></card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {apiArticByUserId,apiDelArticPassivity} from "@/api/articleApi.js"
	const {
		userId,
		userName,
	} = uni.getStorageSync("userInfo");
	const userInfo = ref({
		userId:null,
		userName:null,
		userAvatar:null,
		status:null,
	})
	const articleDate = ref([])
	
	onLoad(async(options) => {
		userInfo.value = options
		await getArticleByUserId()
	});
	
	async function getArticleByUserId(){
		const {data} =await apiArticByUserId(userInfo.value.userId)
		articleDate.value = data
	
	}
	const isClick = ref(true)

	async function clickButton() {
		userInfo.value.status = !JSON.parse(userInfo.value.status) + '';
		
		let parm = {
			userId:userId,
			userName:userName,
			passivityId:userInfo.value.userId,
			passivityName:userInfo.value.userName,
		}
		const res = await apiDelArticPassivity(parm)
	
		console.log("res",res)
	}
</script>

<style lang="scss" scoped>
	.user-other {
		min-height: 25vh;

		/* background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8); */
		//background-image: url("/common/images/1.jpg");
		.user-other-img {
			width: 100%;
		}
	}

	.user-other-info {
		position: relative;
		top: -30px;
		min-height: 75vh;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;

		.other-info-fist {
			display: flex;
			justify-content: space-between;

			.other-info-like {
				display: flex;
				margin-top: 20rpx;
				margin-right: 10rpx;

				view {
					margin: 0 40rpx;

					text {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.user-other-image {
		height: 70px;
		width: 70px;
		border-radius: 50%;
		position: relative;
		top: -15px;
		left: 20px;
	}

	.other-info-text {
		font-size: 14px;
		font-weight: 100;
		color: #a4a3a9;
		margin-top: 6rpx;
	}

	.other-info-center {
		margin: 30rpx 80rpx;

		button {
			border-radius: 30px;
		}
	}

	.other-info-last {
		.item {
			border-bottom: dashed red;
		}

		.other-info-ar {
			text-align: center;
			width: 150rpx;
			padding-bottom: 5rpx;
			margin: 100rpx auto 20rpx auto;
			border-radius: 10rpx;
			border-bottom: 5px solid red;
		}
	}
</style>